<template>
    <!-- 找回密码 -->
    <div class="bodybox flexcenter">
        <Logintop />
        <div class="radius ffffff mainpadding2">
            <div class="titletext">找回密码</div>
            <ul class="margin-top4 flexleft pointer">
                <li class="flexleft bold margin-right3" @click="prevnoe">
                    <div :class="step >= 1 ? 'focus' : 'nofocus'">1</div>
                    <div :style="{ color: step >= 1 ? color1 : color2 }" class="margin-right3">账号检验</div>
                    <i class="el-icon-arrow-right" style="font-size: 18px;"
                        :style="{ color: step >= 1 ? color1 : color2 }"></i>
                </li>
                <li class="flexleft bold margin-right3">
                    <div :class="step >= 2 ? 'focus' : 'nofocus'">2</div>
                    <div :style="{ color: step >= 2 ? color1 : color2 }" class="margin-right3">密码重置</div>
                    <i class="el-icon-arrow-right" style="font-size: 18px;"
                        :style="{ color: step >= 2 ? color1 : color2 }"></i>
                </li>
                <li class="flexleft bold margin-right3">
                    <div :class="step >= 3 ? 'focus' : 'nofocus'">3</div>
                    <div :style="{ color: step >= 3 ? color1 : color2 }" class="margin-right3">完成设置</div>
                </li>
                <!-- <li class="flexleft"></li>
                <li class="flexleft"></li> -->
            </ul>
            <!-- 账号校验 -->
            <template v-if="step == 1">
                <div class="margin-top4">
                    <el-form :model="ruleForm" :rules="rules" label-position="top" ref="ruleForm" label-width="200px"
                        class="demo-ruleForm">
                        <el-form-item prop="mobile">
                            <el-input v-model="ruleForm.mobile" placeholder="请输入手机号"></el-input>
                        </el-form-item>
                        <el-form-item prop="code">
                            <el-input v-model="ruleForm.code" placeholder="请输入验证码">
                                <div slot="append" class="getcode lan pointer" @click="getCode">{{codetext}}</div>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="submitbtn margin-top4" @click="nextone('ruleForm')">下一步</div>
                <div class="lan pointer margin-top2" @click="backpage">前往登录</div>
            </template>
            <!-- 密码重置 -->
            <template v-if="step == 2">
                <div class="margin-top4">
                    <el-form :model="ruleFormRegister" :rules="rules" label-position="top" ref="ruleFormRegister" label-width="200px"
                        class="demo-ruleForm">
                        <el-form-item prop="userPass">
                            <el-input v-model="ruleFormRegister.userPass" type="password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <el-form-item prop="userPassReplace">
                            <el-input v-model="ruleFormRegister.userPassReplace" type="password" placeholder="再次确认密码"></el-input>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="submitbtn margin-top4" @click="nexttwo('ruleFormRegister')">下一步</div>
                <div class="lan pointer margin-top2" @click="backpage">前往登录</div>
            </template>
            
            <template v-if="step == 3">
                <div class="margin-top4 flexcolumn">
                   <i class="el-icon-circle-check" style="font-size: 100px; color: #29cc44;"></i>
                   <div class="titletext margin-top2">重置密码成功</div>
                </div>
                <div class="submitbtn margin-top4" @click="backpage">前往登录</div>
            </template>
        </div>
    </div>
</template>

<script>
import Logintop from "./component/logintop.vue";
import { Message } from 'element-ui'
import { checkAccount,findPassword,getSmsCode } from '@/api/index'
export default {
    components: {
        Logintop
    },
    data() {
        return {
            color1: "#333333",
            color2: "#d1d2de",
            codetext : "获取验证码",
            userId:'',// 用户id
            flag:true,
            step: 1,
            ruleForm: {
                mobile: '',
                code: '',
            },
            ruleFormRegister:{
                userPass:'',
                userPassReplace:'',
            },
            rules: {
                mobile: [
                    { required: true, message: '手机号不能为空', trigger: 'blur' },
                ],
                code: [
                    { required: true, message: '验证码不能为空', trigger: 'blur' }
                ],
                userPass: [
                    { required: true, message: '密码不能为空', trigger: 'blur' }
                ],
                userPassReplace: [
                    { required: true, message: '确认密码不能为空', trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        // 获取验证码
        getCode() {
            let userPhone=this.ruleForm.mobile
            if (userPhone=='') {
                Message({
                    message: '手机号不能为空',
                    type: 'warning',
                    duration: 2000
                })
                return false
            }

            let _this=this
            if(!_this.flag)return
            _this.flag=false
            getSmsCode({ userPhone }).then(res => {
                var i = 60;
                var timer = setInterval(function() {
                    _this.codetext = i + "秒";
                    if (i < 1) {
                        clearInterval(timer);
                        _this.flag=true
                        _this.codetext = "获取验证码";
                    } else {
                        i--;
                    }
                }, 1000)
                // console.log(res);
            })
        },
        // 返回账号校验
        prevnoe(){
            this.step = 1
        },
        // 账号校验
        nextone(formName) {
            let {mobile,code} = this.ruleForm
            let _this=this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    checkAccount({
                        code,
	                    phone: mobile,
                    }).then(res => {
                        console.log(res);
                        _this.userId=res.message
                        _this.step = 2
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 密码重置
        nexttwo(formName) {
            let {mobile,code} = this.ruleForm
            let {userPass} = this.ruleFormRegister
            let _this=this
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                    findPassword({
                        code,
	                    phone: mobile,
                        password:userPass,
                        userId:_this.userId,
                    }).then(res => {
                        // console.log(res);
                        _this.step = 3
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        backpage() {
            this.$router.go(-1)
        }
    }
}
</script>
<style lang="scss">
.bodybox .el-input-group__append {
    background: none;
}

.bodybox .el-input__inner {
    height: 55px;
}
</style>
<style lang="scss" scoped>
.nofocus {
    background-color: #ceced6;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    margin-right: 5px;
}

.focus {
    background-color: #e61717;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    color: #fff;
    font-size: 16px;
    line-height: 24px;
    text-align: center;
    margin-right: 5px;

}

.mainpadding2 {
    padding: 40px 25px;
}

.bodybox {
    position: absolute;
    width: 100%;
    height: 100%;
}
</style>